<template>
  <q-tab-panel name="actionProcessing">
    <q-table
      v-if="actionList.length !== 0"
      class="no-border-radius full-height bg-transparent"
      title="执行中任务"
      :card-container-style="{ overflow: 'auto' }"
      card-container-class="q-pa-sm content-start"
      grid
      :rows="actionList"
      :pagination="{ rowsPerPage: 16 }"
      hide-header
    >
      <template v-slot:top-right>
        <q-btn
          color="secondary"
          icon="cached"
          @click="reset"
          label="重置任务"
        />
      </template>
      <template v-slot:item="props">
        <div class="q-pa-sm col-xs-6 col-sm-4 col-md-3">
          <q-card>
            <q-card-section class="text-h6">{{
              typeName[props.row.type] || props.row.type
            }}</q-card-section>
            <q-list dense bordered padding class="rounded-borders">
              <q-item>
                <q-item-section side>执行设备</q-item-section>
                <q-item-section class="text-h6 text-right">{{
                  props.row.device
                }}</q-item-section>
              </q-item>
              <q-item>
                <q-item-section side>动作分组</q-item-section>
                <q-item-section class="text-h6 text-right">{{
                  groupName[props.row.actionGroup]
                }}</q-item-section>
              </q-item>
              <map-pose-info
                v-if="props.row.type.includes('move')"
                :pose-id="props.row.data"
                center
              />
              <map-pose-info
                v-if="['lift-in', 'lift-out'].includes(props.row.type)"
                :pose-id="props.row.content"
                label="目标工位"
                center
              />
              <fork-cmd-info
                v-else-if="['fork-in', 'fork-out'].includes(props.row.type)"
                :shelf-id="props.row.content"
                center
              />
            </q-list>
          </q-card>
        </div>
      </template>
    </q-table>
    <div v-else>
      <div
        class="flex justify-center content-center"
        style="height: calc(100vh - 9.2rem)"
      >
        <div
          class="text-h4 text-grey-7 text-center q-mt-lg"
          style="width: 30rem"
        >
          当前没有执行中的任务
        </div>
      </div>
    </div>
  </q-tab-panel>
</template>

<script>
import { api } from "boot/axios.js";
import { onMounted, ref, inject, onUnmounted } from "vue";
import { useAPIStore } from "stores/api/index.js";
import { useQuasar } from "quasar";

import MapPoseInfo from "components/amr/MapPoseInfo.vue";
import ForkCmdInfo from "components/actionPlan/ForkCmdInfo.vue";

export default {
  name: "ActionProcessing",
  components: { ForkCmdInfo, MapPoseInfo },
  setup() {
    const $q = useQuasar();
    const centerUrl = useAPIStore().centerUrl;
    const actionList = ref([]);
    function getAction() {
      api.get(centerUrl + "action/processing").then((rs) => {
        actionList.value = rs.data;
      });
    }

    onMounted(getAction);
    const timer = setInterval(getAction, 1000);
    onUnmounted(() => {
      clearInterval(timer);
    });

    const typeName = {};
    const groupName = {};
    inject("typeOptions").forEach((item) => {
      typeName[item.value] = item.label;
    });
    inject("groupOptions").forEach((item) => {
      groupName[item.value] = item.label;
    });

    return {
      columns: [
        { label: "设备", field: "device", name: "device" },
        { label: "动作类型", field: "type", name: "type" },
        { label: "动作分组", field: "actionGroup", name: "actionGroup" },
      ],
      actionList,
      reset() {
        $q.dialog({
          title: "重置任务",
          message: "是否要重置当前中控的任务队列？",
          cancel: true,
          persistent: true,
        }).onOk(() => {
          api.get(centerUrl + "action/clear").then((rs) => {
            if (rs.data === "done") {
              $q.notify({ type: "positive", message: "中控任务队列已重置" });
              getAction();
            }
          });
        });
      },
      typeName,
      groupName,
    };
  },
};
</script>
